

<!-- 礼品卡赠送 -->
<template>
	<view class="container">
		
		<!-- 礼品卡信息 -->
		<view class="cardList-Container">
			<view v-for="(item, index) in cardList" :key="index" class="cardItem">
				
				<view class="cardNumber">
					卡号：{{item.cgcCardNumber}}
				</view>
				
				<view class="cardAmount">
					<text class="money-icon">￥</text><text class="money-text">{{item.cgsAmount / 100}}</text>
				</view>
				
				<image class="cardCover" :class="{usedCover: item.cgcBindingUserId}" :src="imgSite + item.cgImage"></image>
			</view>
		</view>
		

		<!-- 转赠说明 -->
		<view class="shareDesc-Container">
			<view>好友[{{shareName}}]赠送您一张构购电商平台礼品卡。</view>
		</view>
		
		
		<!-- 金额密码 -->
		<view class="amountPass-Container">
			<view class="amoutn">
				金额：{{cardList[0].cgsAmount / 100}}元
			</view>
			<view class="pass">
				密码：{{cardList[0].cgcPassword}}
			</view>
		</view>
		<view class="bindTips-Container">
			请勿将密码泄露给他人，您可以直接输入平台的登录手机号进行充值，也可以在APP内进行充值。
		</view>

	
		<!-- 输入手机号 -->
		<view class="phoneNumber-Container">
			<input type="number" v-model="phoneNumber" maxlength="11" placeholder-class="inputHolder" placeholder="请输入手机号"/>
		</view>


		<!-- 充值到账户 -->
		<view @click="bindGiftCardHandler()" class="bindCardBtn-Container">
			充值到账户
		</view>
		
		
		<!-- 下载App -->
		<!-- #ifndef APP-PLUS -->
		<view @click="gotoDownloadApp()" class="limitAppBuy-Container">
			<image :src="icon.downBg" class="downBg" mode=""></image>
		
			<view class="down-content">
				<image :src="icon.download" class="buyIcon" mode=""></image>
				<view class="buyDesc">下载构购APP购买</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		computed:{
			...mapState(['hasLogin', 'imgSite', 'downUrl']),
		},
		data() {
			return {
				icon: {
					downBg: '/static/images/extension/downBg.png',
					download: '/static/images/extension/download.png'
				},
				shareName: "",
				phoneNumber: "",
				cardList: []
			};
		},
		onLoad: function(options) {
			this.shareName = options.shareName;
			this.cardList = [JSON.parse(options.cardInfo)];
		},
		methods: {
			
			//充值到账户
			bindGiftCardHandler() {
			
				if(!this.phoneNumber.trim()) {
					this.$api.msg("请输入手机号");
					this.phoneNumber = "";
					return ;
				}
			
				var that = this;
				uni.showModal({
					content: '礼品卡面值金额将充入账户余额，是否确认充值？',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							
							that.$api.globalUtil.requestAjax({
								url: '/GiftCardApi/bind',
								method: 'POST',
								data: {
									telephone: that.phoneNumber,
									cgcPassword: that.cardList[0].cgcPassword
								},
								success: function(res) {
									that.$api.msg("充值成功");
								}
							});
						}
					}
				});
			},
			
			
			//goto下载APP
			gotoDownloadApp() {
				let platform = '';
				let that = this;
				let url = that.downUrl;
				
				window.location.href = 'fnwqsg://';
				setTimeout(function() {
					window.location.href = url;
				}, '2000');
			}
		}
	};
</script>
<style lang="less">
	page{
		background: #F5F5F5;
	}
	
	.container {
		padding-bottom: 200rpx;
	}
	
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	//礼品卡列表
	.cardList-Container {
		padding-top: 20rpx;
		
		.cardItem {
			position: relative;
			margin: 0 auto;
			margin-bottom: 30rpx;
			width:690rpx;
			height: 378rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			overflow: hidden;
			
			//卡号
			.cardNumber {
				z-index: 99;
				position: absolute;
				top: 40rpx;
				left: 30rpx;
				font-size:22rpx;
				font-family:PingFang SC;
				// font-weight:500;
				color:rgba(255,255,255,1);
				text-shadow:0px 1px 2px rgba(0, 0, 0, 0.78);
			}
			
			//金额
			.cardAmount {
				z-index: 99;
				position: absolute;
				right: 0;
				top: 295rpx;
				padding-left: 20rpx;
				width:146rpx;
				height:56rpx;
				line-height: 56rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				color:rgba(255,255,255,1);
				text-shadow:0px 2px 3px rgba(119,119,119,1);
				background:rgba(0,0,0,0.5);
				border-radius:8rpx 0px 0px 8rpx;
				
				.money-icon {
					font-size: 24rpx;
				}
				.money-text {
					font-size: 40rpx;
				}
			}
			
			.cardCover {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 378rpx;
				
				&.usedCover {
					background:rgba(0,0,0,0.3);
				}
			}
		}
	}
	
	/* 转赠说明 */
	.shareDesc-Container {
	    margin: 0 auto;
	    margin-top: 36rpx;
	    width: 675rpx;
	    line-height: 42rpx;
	    font-size:26rpx;
	    font-family:Microsoft YaHei;
	    font-weight:400;
	    color: #333333;
	}
	
	
	//金额密码 
	.amountPass-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 46rpx;
		padding: 0 40rpx;
		width:690rpx;
		height:100rpx;
		line-height: 100rpx;
		background:rgba(255,255,255,1);
		border-radius:10rpx;
		
		.amoutn {
			font-size:26rpx;
			font-family:PingFang SC;
			// font-weight:500;
			color: #333333;
		}
		
		.pass {
			font-size:26rpx;
			font-family:PingFang SC;
			// font-weight:500;
			color:#DF1227;
		}
	}
	.bindTips-Container {
		margin: 0 auto;
		margin-top: 34rpx;
		width:600rpx;
		height:64rpx;
		line-height:39rpx;
		text-align: center;
		font-size:24rpx;
		font-family:PingFang SC;
		// font-weight:500;
		color:rgba(153,153,153,1);
	}
	
	
	//输入手机号
	.phoneNumber-Container {
		margin: 0 auto;
		margin-top: 100rpx;
		width:600rpx;
		height:90rpx;
		background:rgba(255,255,255,1);
		border:1rpx solid rgba(255,90,107,1);
		border-radius:10rpx;
		
		input {
			width: 100%;
			height:90rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.inputHolder {
			text-align: center;
			font-size: 26rpx;
			color: #BFBFBF;
		}
	}
	
	
	/* 充值到账户 */
	.bindCardBtn-Container {
		margin: 0 auto;
		margin-top: 40rpx;
		width:600rpx;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size:30rpx;
		font-family:PingFang SC;
		// font-weight:500;
		color:rgba(255,255,255,1);
		background:linear-gradient(90deg,rgba(223,19,37,1) 0%,rgba(207,0,181,1) 100%);
		border-radius:10rpx;
	}
	
	// 下载APP
	.limitAppBuy-Container {
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 110rpx;
		background: rgba(231, 36, 57, 1);
	
		.downBg {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	
		.down-content {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			width: 100%;
			height: 100%;
	
			.buyIcon {
				width: 30rpx;
				height: 30rpx;
			}
			.logoApp {
				position: absolute;
				right: 80rpx;
				width: 127rpx;
				height: 110rpx;
			}
			.buyDesc {
				margin-left: 13rpx;
				height: 110rpx;
				line-height: 110rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				color: #e01228;
			}
		}
	}
</style>



